<!DOCTYPE html>
<html>
<head>
	<title>列表组</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<!-- 徽章式的 -->
		<div class="list-group">
			<ul class="list-group">
				<li class="list-group-item"><span class="badge">10</span>我不喜欢吃苹果</li>
				<li class="list-group-item">我喜欢吃苹果</li>
				<li class="list-group-item"><span class="badge">1</span>我爱吃苹果</li>
				<li class="list-group-item">我大爱吃苹果</li>
				<li class="list-group-item"><span class="badge">30</span>我博爱吃苹果</li>
			</ul>
		</div>

		<!-- 可点击的 -->
		<div class="list-group">
			<a href="#" class="list-group-item active">我不喜欢吃苹果</a>
			<a href="#" class="list-group-item">我喜欢吃苹果</a>
			<a href="#" class="list-group-item">我爱吃苹果</a>
			<a href="#" class="list-group-item disabled">我大爱吃苹果</a>
		</div>

		<!-- 情景类的 -->
		<div class="list-group">
			<a href="#" class="list-group-item list-group-item-success">我不喜欢吃苹果</a>
			<a href="#" class="list-group-item list-group-item-warning">我喜欢吃苹果</a>
			<a href="#" class="list-group-item list-group-item-info">我爱吃苹果</a>
			<a href="#" class="list-group-item list-group-item-danger">我大爱吃苹果</a>
		</div>

<!-- 不止可以放文字，图片、超链接等都可以 -->
		<div class="list-group">
			<a href="#" class="list-group-item">
				<h4 class="list-group-item-heading">爱吃苹果</h4>
				<p class="list-group-item-text">awesrtgfbvcdswaertgf</p>
			</a>
			<a href="#" class="list-group-item">
				<h4 class="list-group-item-heading">爱吃苹果</h4>
				<p class="list-group-item-text">awesrtgfbvcdswaertgf</p>
			</a>
			<a href="#" class="list-group-item">
				<h4 class="list-group-item-heading">爱吃苹果</h4>
				<p class="list-group-item-text">awesrtgfbvcdswaertgf</p>
			</a>
			<a href="#" class="list-group-item">
				<h4 class="list-group-item-heading">爱吃苹果</h4>
				<p class="list-group-item-text">awesrtgfbvcdswaertgf</p>
			</a>
		</div>


	</div>

</body>
</html>